import React, { useState, useEffect, useCallback } from "react";
import { Modal, Alert, Form, Radio, Button, Upload, Card, Switch, Tooltip, message } from "antd";
import { SettingTwoTone, FolderOpenTwoTone } from "@ant-design/icons";

import { CommonModal } from "@/views/components/CommonModal";
import Iconfont from "@/components/IconFont";
import { useExportTask } from "@/views/hooks/useExportTask";
import { useImportTask } from "@/views/hooks/useImportTask";

import ProgressModal from "@/views/components/UIModal/ProgressModal";
import ImportResultModal from "@/views/components/UIModal/ImportResultModal";

import { isEmpty } from "lodash";

const { Dragger } = Upload;

const ActionExcelImportProductsModal = ({ createTaskData, dataSource, onCancel }) => {
	const [visible, setVisible] = useState();

	const { percent, step, result, handleDownload, startTask, clearTimer } = useImportTask();

	const [open, setOpen] = useState(false);

	useEffect(() => {
		setOpen(true);
	}, [])

	useEffect(() => {
		if (step.first === true) {
			setVisible("ProgressModal");
		}
		if (step.second === true) {
			setVisible("ImportResultModal");
		}
		if (step.first === false || step.second === false || step.third === true) {
			onCancel();
		}
	}, [step]);

	//////////////////////////
		const [radioValue, setRadioValue] = useState(1);


		const onRadioChange = e => {
			setRadioValue(e.target.value);
		};

		const [file, setFile] = useState();
		const DraggerProps = {
			name: "file",
			maxCount: 1,
			multiple: false,
			action: "",
			onChange(info) {
				// const { status } = info.file;
				// if (status !== "uploading") {
				// 	console.log(info.file, info.fileList);
				// }
				// if (status === "done") {
				// 	message.success(`${info.file.name} file uploaded successfully.`);
				// } else if (status === "error") {
				// 	message.error(`${info.file.name} file upload failed.`);
				// }
			},
			onDrop(e) {
				// console.log("Dropped files", e.dataTransfer.files);
			},
			beforeUpload(f) {
				console.log("beforeUpload", f);
				setFile(f);
				return false;
			}
		};

		const { downloadExportTask } = useExportTask();

		const handleOk = useCallback(() => {
			if (!file) {
				message.warning("请选择要导入的Excel文件");
				return;
			}
			const businessParam = JSON.stringify({ actionType: radioValue });

			const formData = new FormData();

			formData.append("file", file);
			formData.append("taskType", 1204);
			formData.append("businessParam", businessParam);

			startTask(formData);
		}, [file, radioValue]);
		const tryExportExample = useCallback(() => {
			const businessParam = JSON.parse(createTaskData?.businessParam || "{}");
			if (isEmpty(businessParam.skuParam)) {
				message.warning("模板导出筛条件为空");
			} else if (isEmpty(dataSource)) {
				message.warning("请先筛选列表数据");
			} else {
				downloadExportTask(createTaskData);
			}
		}, [createTaskData, dataSource]);
		return (
			<CommonModal
				title={{ title: "Excel导入更新店铺商品" }}
				open={open}
				width="700px"
				okText="保存"
				onCancel={onCancel}
				onOk={handleOk}
			>
				<Alert
					message="请先批量导出商品资料，编辑后上传导入。如果对应的列有值，则更新，没有则不处理"
					action={
						<Tooltip placement="top" title="根据当前筛选后的商品数据导出模板">
							<Button type="primary" ghost style={{ marginLeft: 10 }} onClick={tryExportExample}>
								模板导出
							</Button>
						</Tooltip>
					}
					type="info"
					showIcon
				/>
				<div className="sectionContent">
					<div style={{ margin: "15px 0" }}>
						导入时，如果系统存在相同商品编码，则
						<Radio.Group onChange={onRadioChange} value={radioValue} style={{ marginLeft: "10px" }}>
							<Radio value={1}>跳过，不处理</Radio>
							<Radio value={2}>全部更新</Radio>
						</Radio.Group>
					</div>
					<Dragger {...DraggerProps}>
						<p className="ant-upload-drag-icon">
							<Iconfont type="iconExcel" style={{ fontSize: 40 }} />
						</p>
						<p>点击或将文件拖拽到这里上传,只支持Excel文件</p>
						<p className="light-gray">最大50mb，单次最多5000条商品</p>
					</Dragger>
				</div>
				<ProgressModal
				visible={visible === "ProgressModal"}
				type="progress"
				percent={percent}
				title="导入更新商品"
				msg="正在导入商品，请等待..."
				skip
				onCancel={() => {
					{
						onCancel();
						clearTimer();
					}
				}}
			/>
			<ImportResultModal
				visible={visible === "ImportResultModal"}
				result={result}
				handleExportFailed={handleDownload}
				handleCancel={onCancel}
			/>
			</CommonModal>
		);
};
export default ActionExcelImportProductsModal;
